<template>
  <div class="home">
    <div class="container">
      <nav>
        <div class="logo">
          <span><img src="../assets/img/河马logo-方_绿.png" alt=""></span>
        </div>
        <div class="address">
          <van-icon name="location" />
          <span>从化区粤嵌科技</span>
        </div>
        <router-link to="/settlement" class="settlement">
          <van-icon name="cart-o" />
        </router-link>
      </nav>
      <div class="search">
        <van-search shape="round" v-model="searchValue" placeholder="今天吃点什么~" />
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../assets/img/swipe1.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/img/swipe2.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/img/swipe3.png" alt=""></van-swipe-item>
        <van-swipe-item><img src="../assets/img/swipe4.jpeg" alt=""></van-swipe-item>
      </van-swipe>
      <my-cat></my-cat>
      <find-view></find-view>
      <sell-view></sell-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home {
  height: 1160px;
  background-color: #FEFEFE;

  nav {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
  }

  .logo span {
    width: 20px;
    height: 20px;
    font-weight: bold;
    img {
      width: 30px;
      height: 30px;
    }
  }

  .address {
    font-size: 13px;
    color: #1EC28A;
  }

  .shopping {
    font-size: 20px;
    font-weight: bold;
  }

  .van-search {
    padding: 0;
    height: 42px;
    margin-bottom: 10px;
  }
  .my-swipe .van-swipe-item {
    width: 100%;
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 150px;
      background-repeat: no-repeat;
    }
  }
}

</style>

<script>
import MyCat from '@/components/MyCat.vue';
import FindView from '@/components/FindView.vue';
import SortView from '@/components/SellView.vue';
import SellView from '@/components/SellView.vue';
import router from '@/router';
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe).use(SwipeItem);

export default {
  data() {
    return {
      searchValue: '',
      isMyCatVisible: true, // 通过状态控制MyCat的显示
    };
  },
  watch: {
    searchValue(newValue) {
      if (newValue.length > 100) {
        console.warn('搜索内容过长，限制在100字符内');
      }
    },
  },
  components: {
    MyCat,
    FindView,
    SellView
  },
};
</script>
